<template>
  <s-page custom-class="Icon-Page">
    <s-fixed position="top">
      <s-tabs v-model="activeTab" :list="tabs" border />
    </s-fixed>

    <view>
      <view v-if="activeTab === 0" class="group">
        <c-demo-block title="基础用法">
          <c-icon-list :list="[{ name: 'chat-o' }, { name: 'https://b.yzcdn.cn/vant/icon-demo-1126.png' }]" />
        </c-demo-block>

        <c-demo-block title="图标颜色">
          <c-icon-list
            :list="[
              { name: 'chat-o', color: 'rgb(25, 137, 250)' },
              { name: 'fire-o', color: 'rgb(238, 10, 36)' },
            ]"
          />
        </c-demo-block>

        <c-demo-block title="图标大小">
          <c-icon-list
            :list="[
              { name: 'chat-o', size: 80 },
              { name: 'chat-o', size: 100 },
            ]"
          />
        </c-demo-block>
      </view>

      <view v-if="activeTab === 1" class="group">
        <c-icon-list show-name :list="basicList" />
      </view>
      <view v-if="activeTab === 2" class="group">
        <c-icon-list show-name :list="lineList" />
      </view>
      <view v-if="activeTab === 3" class="group">
        <c-icon-list show-name :list="solidList" />
      </view>
    </view>
  </s-page>
</template>

<script>
export default {
  data: () => ({
    activeTab: 0,
    tabs: [
      { label: '用法示例' },
      { label: '基础图标' },
      { label: '线框风格' },
      { label: '实底风格' },
    ],
    // 基础图标
    basicList: [
      'arrow',
      'arrow-left',
      'arrow-up',
      'arrow-down',
      'success',
      'cross',
      'plus',
      'minus',
      'fail',
      'circle',
    ].map(name => ({ name })),
    // 线框风格
    lineList: [
      'location-o',
      'like-o',
      'star-o',
      'phone-o',
      'setting-o',
      'fire-o',
      'coupon-o',
      'cart-o',
      'shopping-cart-o',
      'cart-circle-o',
      'friends-o',
      'comment-o',
      'gem-o',
      'gift-o',
      'point-gift-o',
      'send-gift-o',
      'service-o',
      'bag-o',
      'todo-list-o',
      'balance-list-o',
      'close',
      'clock-o',
      'question-o',
      'passed',
      'add-o',
      'gold-coin-o',
      'info-o',
      'play-circle-o',
      'pause-circle-o',
      'stop-circle-o',
      'warning-o',
      'phone-circle-o',
      'music-o',
      'smile-o',
      'thumb-circle-o',
      'comment-circle-o',
      'browsing-history-o',
      'underway-o',
      'more-o',
      'video-o',
      'shop-o',
      'shop-collect-o',
      'share-o',
      'chat-o',
      'smile-comment-o',
      'vip-card-o',
      'award-o',
      'diamond-o',
      'volume-o',
      'cluster-o',
      'wap-home-o',
      'photo-o',
      'gift-card-o',
      'expand-o',
      'medal-o',
      'good-job-o',
      'manager-o',
      'label-o',
      'bookmark-o',
      'bill-o',
      'hot-o',
      'hot-sale-o',
      'new-o',
      'new-arrival-o',
      'goods-collect-o',
      'eye-o',
      'delete-o',
      'font-o',
      'balance-o',
      'refund-o',
      'birthday-cake-o',
      'user-o',
      'orders-o',
      'tv-o',
      'envelop-o',
      'flag-o',
      'flower-o',
      'filter-o',
      'bar-chart-o',
      'chart-trending-o',
      'brush-o',
      'bullhorn-o',
      'hotel-o',
      'cashier-o',
      'newspaper-o',
      'warn-o',
      'notes-o',
      'calendar-o',
      'bulb-o',
      'user-circle-o',
      'desktop-o',
      'apps-o',
      'home-o',
      'back-top',
      'search',
      'points',
      'edit',
      'qr',
      'qr-invalid',
      'closed-eye',
      'down',
      'scan',
      'revoke',
      'free-postage',
      'certificate',
      'logistics',
      'contact',
      'cash-back-record',
      'after-sale',
      'exchange',
      'upgrade',
      'ellipsis',
      'description',
      'records',
      'sign',
      'completed',
      'failure',
      'ecard-pay',
      'peer-pay',
      'balance-pay',
      'credit-pay',
      'debit-pay',
      'cash-on-deliver',
      'other-pay',
      'tosend',
      'pending-payment',
      'paid',
      'aim',
      'discount',
      'idcard',
      'replay',
      'shrink',
    ].map(name => ({ name })),
    // 实底风格
    solidList: [
      'location',
      'like',
      'star',
      'phone',
      'setting',
      'fire',
      'coupon',
      'cart',
      'shopping-cart',
      'cart-circle',
      'friends',
      'comment',
      'gem',
      'gift',
      'point-gift',
      'send-gift',
      'service',
      'bag',
      'todo-list',
      'balance-list',
      'clear',
      'clock',
      'question',
      'checked',
      'add',
      'gold-coin',
      'info',
      'play-circle',
      'pause-circle',
      'stop-circle',
      'warning',
      'phone-circle',
      'music',
      'smile',
      'thumb-circle',
      'comment-circle',
      'browsing-history',
      'underway',
      'more',
      'video',
      'shop',
      'shop-collect',
      'share',
      'chat',
      'smile-comment',
      'vip-card',
      'award',
      'diamond',
      'volume',
      'cluster',
      'wap-home',
      'photo',
      'gift-card',
      'expand',
      'medal',
      'good-job',
      'manager',
      'label',
      'bookmark',
      'bill',
      'hot',
      'hot-sale',
      'new',
      'new-arrival',
      'goods-collect',
      'eye',
      'delete',
      'font',
      'wechat',
      'wechat-pay',
      'alipay',
      'photograph',
      'youzan-shield',
      'umbrella-circle',
      'bell',
      'printer',
      'map-marked',
      'card',
      'add-square',
      'live',
      'lock',
      'audio',
      'graphic',
      'column',
      'invition',
      'play',
      'pause',
      'stop',
      'weapp-nav',
      'ascending',
      'descending',
      'bars',
      'wap-nav',
      'enlarge',
      'photo-fail',
      'sort',
    ].map(name => ({ name })),
  }),
};
</script>

<style lang="scss">
.Icon-Page {
  .group {
    width: auto;
    margin: 30rpx;
    background-color: $white;
    border-radius: $border-radius-lg;
    ::v-deep {
      .c-demo-block {
        padding: 0;
        &__title {
          padding-left: 40rpx;
        }
      }
    }
  }
}
</style>
